<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        1 元素选择器
            语法:标签名{}
            某些同名的元素不想用，或者不同名的想用
        2 id选择器 根据标签的id值确定样式的作用元素
                    一般每个元素元素都有id属性，但是在一个页面中，id值不应该相同，id值唯一
            语法:#id值{}
            id值的不同导致过程也会复杂
        3 class选择器 根据元素的class值属性确定样式的作用元素
                     元素的class属性值可以重复，而且一个class属性可以有多个值
            语法：.class属性值{}
        */
        /* input{
        width: 60px;
        height: 40px;
        color: rgb(22, 32, 32);
        font-size: 20px;
        font-family: '隶书';
        border: 2px solid rgb(127, 197, 127);
        border-radius: 5px;
        line-height: 30px;
        } */

        /* #btn3{
        width: 60px;
        height: 40px;
        color: rgb(22, 32, 32);
        font-size: 20px;
        font-family: '隶书';
        border: 2px solid rgb(127, 197, 127);
        border-radius: 5px;
        line-height: 30px;
        } */

        .shapeClass{
            width: 80px;
            height: 40px;
            border-radius: 5px;
        }

        .colorClass{
            background-color: aquamarine;
            color: azure;
            border: 3px solid green;
        }

        .fontClass{
            font-size: 20px;
            font-family: '隶书';
            line-height: 30px;
        }
    </style>
</head>
<body>
    <input id="btn1" class="shapeClass colorClass fontClass" type="button" value="按钮">
    <input id="btn2" type="button" value="按钮">
    <input id="btn3" type="button" value="按钮">
</body>
</html>